<template>
    <view class="u-page" style="background-color: #ffffff;">
      <view style="padding: 1vw;position: sticky;top: 0;z-index: 1;background-color: white;">
        <view class="search-bar">
          <up-form>
            <up-form-item
                label="实验名称："
                labelWidth="auto">
            </up-form-item>
            <up-input placeholder="请输入模板名称" v-model="laborForm.experimentName" disabled/>

          </up-form>
        </view>
      </view>
      <up-form-item
          label="实验描述："
          labelWidth="auto" >
      </up-form-item>
      <up-textarea autoHeight="true" confirmType="return"  placeholder="请输入内容" v-model="laborForm.experimentDescribe" disabled></up-textarea>
      <up-divider></up-divider>
      <view>
        <up-card v-for="(item,index) in laborForm.sideTables">
          <template #head>
<!--            <view>实验流程{{index+1}}：<a style="color: red;margin-left: 50vw" type="error" @click="deleteFlow(index)">删除</a></view>-->
            <view>
              <span>步骤： {{index+1}}</span>
              <span style="margin-left: 30px">状态：<span style="font-size: 12pt" v-if="laborForm.experimentStatus==3">已终止</span><span style="font-size: 12pt" v-if="item.stepStatus == 1 && laborForm.experimentStatus!=3">进行中</span><span style="font-size: 12pt" v-if="item.stepStatus == 2 && laborForm.experimentStatus!=3">已完成</span></span>
              <span style="font-size: 12pt" v-if="item.stepStatus == 2"><br><span>完成时间：<span v-if="item.comTime">{{item.comTime}}</span><span v-if="!item.comTime">{{item.stepEndTime}}</span></span></span>
            </view>
          </template>
          <template #body>
            <view class="" slot="body">
              <up-form>
<!--                <up-form-item-->
<!--                    :label="'实验流程'+(index+1)+'：'"-->
<!--                    labelWidth="auto">-->
<!--                  <up-input placeholder="请输入流程名称" v-model="item.stepName" disabled/>-->
<!--                </up-form-item>-->
<!--                <up-form-item-->
<!--                    :label="'步骤'+(index+1)+'：'"-->
<!--                    labelWidth="auto" >-->
<!--                </up-form-item>-->
                <up-textarea autoHeight="true" confirmType="return"  placeholder="请输入" v-model="item.stepDescribe" disabled></up-textarea>
                <up-form-item
                    label="结果总结："
                    labelWidth="auto" >
                </up-form-item>
                <up-textarea autoHeight="true" confirmType="return" placeholder="请输入结果总结" :disabled="true" v-model="item.stepSummary"></up-textarea>
                <up-form-item
                    label="上传图片："
                    labelWidth="auto" >
                  <uni-file-picker
                    limit="9"
                    @success="success"
                    @fail="fail"
                    @select="select($event,index)"
                    :auto-upload="false"
                    v-model="item.fileList"
                    @delete="deleteFile"
                    :readonly="true"
                  >
                  </uni-file-picker>
                </up-form-item>
              </up-form>
            </view>
          </template>
        </up-card>
<!--        补充内容-->
        <up-card v-for="(item,index) in laborForm.supplementaries">
          <template #head>
            <span style="font-size: 12pt">补充{{ index+1 }}</span><br>
            <span style="font-size: 12pt">补充时间：<span>{{item.supplementaryTime}}</span></span><br>
            <span style="font-size: 12pt">补充人：<span>{{item.supplementaryUserName}}</span></span>
          </template>
          <template #body>
            <view class="" slot="body">
              <up-form>
                <up-form-item
                    label="补充内容："
                    labelWidth="auto" >
                </up-form-item>
                <up-textarea  :disabled="true" confirmType="return" v-model="item.supplementaryContent"></up-textarea>
              </up-form>
            </view>
          </template>
        </up-card>
      </view>
    </view>
</template>

<script setup>
import {onLoad} from "@dcloudio/uni-app";
import { ref } from 'vue';
import { getTempById,addLaborAPI,getLaborById,editAPI,saveSyAPI,compStep,isHaveNotComp,compSy } from '@/api/system/sysIndex.js'
import {deleteAPI} from "../../api/system/sysIndex";
const laborId = ref('')
const tempObj = ref({})
const laborForm = ref({
  id:'',//id
  experimentName:'',  //实验名称
  experimentDescribe:'',  //实验描述
  sideTables:[],  //实验子流程表
  experimentStatus:'',
  supplementaries:[]//补充内容
})

onLoad((options) => {
  laborId.value = options.laborId
  if (options.laborId){
      initLabor()
  }
  console.log(options.laborId)
});

//处理图片
function select(e,index){
  const uploadUrl = 'http://39.105.221.189:7009/common/upload';
  uni.uploadFile({
    url: uploadUrl,
    filePath: e.tempFilePaths[0],
    name: 'file',
    success: (res) => {
      const picObj = JSON.parse(res.data)
      laborForm.value.sideTables[index].fileList.push(picObj);
      console.log(JSON.parse(res.data));
    },
    fail: (err) => {
      console.error(err);
    },
  });
  // console.log('选择文件：',e.tempFilePaths[0])
}

//删除图片
function deleteFile(e,index){
 console.log(e,index)
}

function success(e){
  console.log('上传成功',e)
}

function fail(e){
  console.log('上传失败：',e)
}

//根据id查询实验
function initLabor(){
  getLaborById(laborId.value).then((response) => {
    tempObj.value = response.data || [];
    laborForm.value.id = response.data.id
    laborForm.value.experimentName = response.data.experimentName
    laborForm.value.experimentDescribe = response.data.experimentDescribe
    laborForm.value.experimentStatus = response.data.experimentStatus
    laborForm.value.supplementaries = response.data.supplementaries
    const list = response.data.sideTables
    for (let i = 0; i < list.length; i++) {
      if (list[i].pictureUrl){
        const pictureUrl = list[i].pictureUrl.split(',')
        if (pictureUrl.length >0 && pictureUrl[0]!=''){
          list[i].fileList = []
          for (let j = 0; j <pictureUrl.length ; j++) {
            let obj = {fileName:pictureUrl[j],url:'http://39.105.221.189:7009'+pictureUrl[j]}
            list[i].fileList.push(obj)
          }
        }else {
          list[i].fileList = []
        }
      }else {
        list[i].fileList = []
      }
    }
    laborForm.value.sideTables = list
    console.log(laborForm.value.sideTables)
  });
}


//保存实验
function bcsy(){
  const sideTables =  laborForm.value.sideTables
  console.log(sideTables)  //http://39.105.221.189:7009
  for (let i = 0; i < sideTables.length; i++) {
    const urlList = []
    if (sideTables[i].fileList){
      for (let j = 0; j <sideTables[i].fileList.length; j++) {
        if (sideTables[i].fileList[j].fileName){
          urlList.push(sideTables[i].fileList[j].fileName)
        }else {
          urlList.push(sideTables[i].fileList[j].url.replace('http://39.105.221.189:7009',''))
        }
      }
    }
    sideTables[i].pictureUrl = urlList.join(',')
    sideTables[i].fileList = []
  }
  laborForm.value.sideTables  = sideTables
  saveSyAPI(laborForm.value)
      .then((response) => {
        uni.showToast({
          title: ' 保存成功！',
          mask: false,
          icon: "success",
        });
        uni.redirectTo({
          url: '/pages/laboratory/myLabor'
        });
      }).catch((err) => {
    uni.showToast({
      title: err.message,
      mask: false,
      icon: "none",
    });
  })
}

//完成实验
function wcsy(){
  isHaveNotComp(laborForm.value.id)
      .then((response) => {
        if (response.data == 1){
          uni.showToast({
            title: '所有步骤完成之后才可完成实验！',
            mask: false,
            icon: "none",
          });
          return
        }else {
          uni.showModal({
            title: '提示',
            content: '是否确定完成实验？',
            cancelText: '取消',
            confirmText: '确定',
            success: function (res) {
              if (res.confirm) {
                compSy(laborForm.value.id)
                    .then((response) => {
                      uni.showToast({
                        title: ' 实验完成！',
                        mask: false,
                        icon: "success",
                      });
                      uni.redirectTo({
                        url: '/pages/laboratory/myLabor'
                      });
                    }).catch((err) => {
                  uni.showToast({
                    title:err.message,
                    mask: false,
                    icon: "none",
                  });
                })
              }
            }
          })
        }
      }).catch((err) => {
        uni.showToast({
          title:err.message,
          mask: false,
          icon: "none",
        });
  })
}

//步骤完成
function completeSteps(id,stepSummary,fileList){
  if (!stepSummary){
    uni.showToast({
      title:  '请填写步骤总结！',
      icon: "none",
    });
    return
  }
  const urlList = []
  for (let j = 0; j <fileList.length; j++) {
    if (fileList[j].fileName){
      urlList.push(fileList[j].fileName)
    }else {
      urlList.push(fileList[j].url.replace('http://39.105.221.189:7009',''))
    }
  }
  uni.showModal({
    title: '提示',
    content: '是否完成步骤？',
    cancelText: '取消',
    confirmText: '确定',
    success: function (res) {
      if (res.confirm) {
        console.log(222,urlList)
        const obj = {id:id,stepSummary:stepSummary,fileList:urlList}
        compStep(obj)
            .then((response) => {
              uni.showToast({
                title: ' 步骤已完成！',
                mask: false,
                icon: "success",
              });
              for (let i = 0; i <laborForm.value.sideTables.length; i++) {
                if (id == laborForm.value.sideTables[i].id){
                  laborForm.value.sideTables[i].stepStatus = 2
                  laborForm.value.sideTables[i].comTime = response.msg
                }
              }
            }).catch((err) => {
          uni.showToast({
            title: err.message,
            mask: false,
            icon: "none",
          });
        })
      }
    }
  })
}

</script>

<style lang="scss" scoped>

</style>
